<template>
  <view class="r-content">
    <view :style="{height:props.height}" class="r-page">
      <view>
        <view class="r-login">
          <Card
              :elevation="'5px'"
              :padding="['20px','20px','20px','20px']"
              :title="'欢迎注册'"
              src="https://yanglelelele.vip/myblog/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220823105902.jpg"
          >
            <template #default>
              <view class="r-body">
                <u--form>
                  <u-form-item
                      label="账号"
                      prop="username"
                  >
                    <u--input v-model="state.form.username"/>

                  </u-form-item>
                  <u-form-item
                      label="密码"
                      prop="password"
                  >
                    <u--input v-model="state.form.password"/>
                  </u-form-item>
                </u--form>
              </view>


            </template>
            <template #footer>
              <u-button   text="注册" type="primary"></u-button>

            </template>

          </Card>

        </view>
      </view>
    </view>
  </view>

</template>

<script setup>
import {defineProps, reactive} from "vue";
import Card from "@/components/Card";
const props = defineProps({
  height: {
    default: () => '100vh',
    type: String
  }
})

const state = reactive({
  form: {
    username: '',
    password: ''

  }

})

</script>

<style lang="scss" scoped>

.r-content {
  .r-page {
    background-image: url("https://yanglelelele.vip/myblog/%E7%88%B1%E6%80%9D%E5%A3%81%E7%BA%B8_412068.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .r-login {
      padding: 0 60 rpx;
      .r-body{

        padding: 0 20rpx;
      }
    }
  }
}
</style>
